computer science [Computer Science] Redux란? 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 👉 상태 관리 라이브러리를 사용하면 👉 상태 관리 툴 종류 상태를 변화시키는 방법은 오직 액션을 일으키는 것이다. 이것은 상태를 변화시키는 의도를 정확하게 표현할 수 있고, 상태 변경에 대한 추적이 용이해지게 된다. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다. 리듀서는 현재 상태... Reactcomputer scienceReact [Computer Science] React 렌더링 성능 최적화 React.memo를 통해 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화 해줄 수 있다. 또 그 함수가 리턴되는 값이 자식 컴포넌트에도 사용이 된다면, 그 자식 컴포넌트도 함수가 호출 될 때마다 새로운 값을 받아 리렌더링 된다. 즉, 함수 호출 시간도 세이브할 수 있고 같은 값을 props로 받는 하위 컴포넌트의 리렌더링도 방지... computer scienceReactReact [Computer Science] 클래스형 컴포넌트 vs 함수형 컴포넌트 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로... computer sciencecomputer science [Computer Science] var, let, const의 차이 자바스크립트에서 변수 선언할 때 사용되는 var, let, const는 도대체 어떤 차이점이 있을까? 간단하게 알아보았다. var var로 변수 선언을 했을 때 가장 큰 특징은 중복 선언이 가능하다는 점이다. 위와 같이 중복 선언을 했을 때 에러가 발생하지 않고 중복 선언이 가능하다. ES6에서는 이런 중복 선언이 가능한 문제를 해결하기 위해 let과 const를 추가했다. let let의 ... computer sciencecomputer science [Computer Science] 이벤트 버블링과 캡처링 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 1. <p>에 할당된 onclick 핸들러가 동작한다. 2. 바깥의 <div>에 할당된 핸들러가 동작한다. 3. 그 바깥의 <form>에 핧당된 핸들러가 동작한다. 4. d... computer sciencecomputer science [Computer Science] Virtual Dom 이란? DOM(Document Object Model)의 약자로 간단하게 설명하면 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. DOM은 내가 작성한 HTML로 부터 생성되지만, 브라우저가 알아서 필요한 노드들을 붙여준다. 예를 들어, <head>나 <body> 없이 <html>안에 어떠한 내용을 작성하더라... computer sciencecomputer science 모두를 위한 컴퓨터 과학 (CS50 2019) - C언어_2강. 문자열 C는 오래된 언어이기 때문에 변수가 저장하는 데이터의 종류를 아주 정확하게 명시해줘야 한다. 문자열(string) / 이때 string을 형식지정자라고 한다. 프로그래밍 언어에서 '='은 오른쪽에서 왼쪽으로 가는 화살표와 비슷하다. 이를 할당연산자라고 한다. 터미널창에 아래 명령어를 입력하여 컴파일을 할 수 있다. -> 여기서 -o string은 string.c를 string.out이라는 머... computer sciencecomputer science Data Structure #1 - Hash Table 해시테이블은 해시 함수를 활용해서 키를 해시값으로 매핑하고, 이 해시값을 색인(인덱스) 또는 주소 삼아 데이터를 key와 함께 저장하는 자료구조를 뜻한다. ➡️ [key:value]로 데이터를 저장하는 자료구조 해시 테이블의 구성 해시테이블은 키(key), 값(value), 해시함수(hash function), 해시(hash), 데이터가 저장되는 곳(bucket, slot)으로 구성되어 있다... computer sciencedata structurecomputer science CS; Computer Science(feat. David J. Malan) 즉, 그 문제에 대한 답을 찾는 것이다 일의 자리부터 2의 0제곱, 십의 자리는 2의 1제곱, ··· 이런식으로 곱해서 그 값들을 다 더하면 123가 나올 것이다 위에서 계속 언급된 OO의 자리의 자리를 우리는 컴퓨터에서는 bit라고 부르고 전구의 켜고 끔 같은 정보를 저장할 수 있다 이렇게하여 위와 같은 다양한 데이터들을 표현할 수 있게 된다 그 중에 문자를 숫자로 표현할 수 있도록 정해진... 부스트코스CScomputer science컴퓨터 과학CS 시간 복잡도 정리 Code 1 과 Code 2는 모두 1부터 N까지 합을 구하는 코드이다. 시간 복잡도는 연산의 개수를 세어 얼마만큼의 연산이 수행되는가를 통해 로직의 효율을 분석하는데 사용된다. 최상의 경우 : 오메가 표기법 (Big-Ω Notation) 평균의 경우 : 세타 표기법 (Big-θ Notation) 최악의 경우 : 빅오 표기법 (Big-O Notation) Θ 표기법을 계산하여 사용하는 것이 ... computer sciencecomputer science HTML Form & 유효성 검사 w3school에서 HTML Form을 다음과 같이 정의 한다. An HTML form is used to collect user input. The user input is most often sent to a server for processing. 즉 HTML은 유저의 입력값을 받아 주로 서버에 공정하기 위해 보내지는 것이다. 다음은 text type의 input element를 활용한... Front-end RoadmapCScomputer science프론트앤드 로드맵CS [CS] 재귀함수 코드를 봤을 때 코드 안에 자신이 다시 호출되는 코드가 존재한다면 이를 재귀함수로 볼 수 있다. 즉, 재귀함수는 반복적인 수행을 해야하는 문제 상황에서 사용할 수 있다. 예를 들어 피보나치나 펙토리얼 등 점화식과 함수의 return 형식이 동일하게 출력할 수 있는 경우에는 재귀함수를 이용하는 것이 오히려 코드 이해를 돕는다. 개인적으로 재귀함수를 완전탐색, DFS, BACK TRACKING,... 재귀computer sciencerecursive function재귀함수recursive비전공개발자CSCS
[Computer Science] Redux란? 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 👉 상태 관리 라이브러리를 사용하면 👉 상태 관리 툴 종류 상태를 변화시키는 방법은 오직 액션을 일으키는 것이다. 이것은 상태를 변화시키는 의도를 정확하게 표현할 수 있고, 상태 변경에 대한 추적이 용이해지게 된다. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다. 리듀서는 현재 상태... Reactcomputer scienceReact [Computer Science] React 렌더링 성능 최적화 React.memo를 통해 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화 해줄 수 있다. 또 그 함수가 리턴되는 값이 자식 컴포넌트에도 사용이 된다면, 그 자식 컴포넌트도 함수가 호출 될 때마다 새로운 값을 받아 리렌더링 된다. 즉, 함수 호출 시간도 세이브할 수 있고 같은 값을 props로 받는 하위 컴포넌트의 리렌더링도 방지... computer scienceReactReact [Computer Science] 클래스형 컴포넌트 vs 함수형 컴포넌트 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로... computer sciencecomputer science [Computer Science] var, let, const의 차이 자바스크립트에서 변수 선언할 때 사용되는 var, let, const는 도대체 어떤 차이점이 있을까? 간단하게 알아보았다. var var로 변수 선언을 했을 때 가장 큰 특징은 중복 선언이 가능하다는 점이다. 위와 같이 중복 선언을 했을 때 에러가 발생하지 않고 중복 선언이 가능하다. ES6에서는 이런 중복 선언이 가능한 문제를 해결하기 위해 let과 const를 추가했다. let let의 ... computer sciencecomputer science [Computer Science] 이벤트 버블링과 캡처링 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 1. <p>에 할당된 onclick 핸들러가 동작한다. 2. 바깥의 <div>에 할당된 핸들러가 동작한다. 3. 그 바깥의 <form>에 핧당된 핸들러가 동작한다. 4. d... computer sciencecomputer science [Computer Science] Virtual Dom 이란? DOM(Document Object Model)의 약자로 간단하게 설명하면 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. DOM은 내가 작성한 HTML로 부터 생성되지만, 브라우저가 알아서 필요한 노드들을 붙여준다. 예를 들어, <head>나 <body> 없이 <html>안에 어떠한 내용을 작성하더라... computer sciencecomputer science 모두를 위한 컴퓨터 과학 (CS50 2019) - C언어_2강. 문자열 C는 오래된 언어이기 때문에 변수가 저장하는 데이터의 종류를 아주 정확하게 명시해줘야 한다. 문자열(string) / 이때 string을 형식지정자라고 한다. 프로그래밍 언어에서 '='은 오른쪽에서 왼쪽으로 가는 화살표와 비슷하다. 이를 할당연산자라고 한다. 터미널창에 아래 명령어를 입력하여 컴파일을 할 수 있다. -> 여기서 -o string은 string.c를 string.out이라는 머... computer sciencecomputer science Data Structure #1 - Hash Table 해시테이블은 해시 함수를 활용해서 키를 해시값으로 매핑하고, 이 해시값을 색인(인덱스) 또는 주소 삼아 데이터를 key와 함께 저장하는 자료구조를 뜻한다. ➡️ [key:value]로 데이터를 저장하는 자료구조 해시 테이블의 구성 해시테이블은 키(key), 값(value), 해시함수(hash function), 해시(hash), 데이터가 저장되는 곳(bucket, slot)으로 구성되어 있다... computer sciencedata structurecomputer science CS; Computer Science(feat. David J. Malan) 즉, 그 문제에 대한 답을 찾는 것이다 일의 자리부터 2의 0제곱, 십의 자리는 2의 1제곱, ··· 이런식으로 곱해서 그 값들을 다 더하면 123가 나올 것이다 위에서 계속 언급된 OO의 자리의 자리를 우리는 컴퓨터에서는 bit라고 부르고 전구의 켜고 끔 같은 정보를 저장할 수 있다 이렇게하여 위와 같은 다양한 데이터들을 표현할 수 있게 된다 그 중에 문자를 숫자로 표현할 수 있도록 정해진... 부스트코스CScomputer science컴퓨터 과학CS 시간 복잡도 정리 Code 1 과 Code 2는 모두 1부터 N까지 합을 구하는 코드이다. 시간 복잡도는 연산의 개수를 세어 얼마만큼의 연산이 수행되는가를 통해 로직의 효율을 분석하는데 사용된다. 최상의 경우 : 오메가 표기법 (Big-Ω Notation) 평균의 경우 : 세타 표기법 (Big-θ Notation) 최악의 경우 : 빅오 표기법 (Big-O Notation) Θ 표기법을 계산하여 사용하는 것이 ... computer sciencecomputer science HTML Form & 유효성 검사 w3school에서 HTML Form을 다음과 같이 정의 한다. An HTML form is used to collect user input. The user input is most often sent to a server for processing. 즉 HTML은 유저의 입력값을 받아 주로 서버에 공정하기 위해 보내지는 것이다. 다음은 text type의 input element를 활용한... Front-end RoadmapCScomputer science프론트앤드 로드맵CS [CS] 재귀함수 코드를 봤을 때 코드 안에 자신이 다시 호출되는 코드가 존재한다면 이를 재귀함수로 볼 수 있다. 즉, 재귀함수는 반복적인 수행을 해야하는 문제 상황에서 사용할 수 있다. 예를 들어 피보나치나 펙토리얼 등 점화식과 함수의 return 형식이 동일하게 출력할 수 있는 경우에는 재귀함수를 이용하는 것이 오히려 코드 이해를 돕는다. 개인적으로 재귀함수를 완전탐색, DFS, BACK TRACKING,... 재귀computer sciencerecursive function재귀함수recursive비전공개발자CSCS